<!--
 * new page
 * @author: sunYihui
 * @since: 2024-09-12
 * administrator.vue
-->
<template>
  <el-dialog v-model="dialogVisible" :title="form.id?'修改管理员':'新增管理员'" width="700" :before-close="handleClose" align-center>
    <template #footer>
      <div class="dialog-footer">
        <!-- 表单 -->
        <!-- {{ form }} -->
        <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="账号：" prop="username">
            <el-input size="large" v-model="form.username" />
          </el-form-item>
          <el-form-item label="密码：" prop="pass">
            <el-input size="large" v-model="form.pass" />
          </el-form-item>
          <el-form-item  label="确认密码：" prop="repass">
            <el-input size="large" v-model="form.repass" />
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input size="large" v-model="form.name" />
          </el-form-item>
          <el-form-item label="联系方式：" prop="tel">
            <el-input size="large" v-model="form.tel" />
          </el-form-item>
          <el-form-item label="角色：" prop="typeid">
            <el-select size="large" v-model="form.typeid" placeholder="请选择角色">
              <el-option  v-for="item in roleData" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getList } from '../../service/administratorrole/administratorrole';
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { addData } from '../../service/administrator/administrator'
import { ElMessage } from 'element-plus';

const emits = defineEmits(["close"])

let dialogVisible = ref(true)
const handleClose = () => {
  emits("close");
}

const props =withDefaults(defineProps<RuleForm>(),{
  id: null,
  username: '',
  pass: '',
  repass: '',
  name: '',
  tel: "",
  typeid: null
})


interface RuleForm {
  id: number | null,
  username: string | null,
  pass: string | null,
  repass: string | null,
  name: string | null,
  tel: string | null,
  typeid: number | null
}


const form = reactive<RuleForm>({
  id: null,
  username: '',
  pass: '',
  repass: '',
  name: '',
  tel: "",
  typeid: null
})
const ruleFormRef = ref<FormInstance>()

//提交加表单验证
const submit = async () => {
  await ruleFormRef.value?.validate(async (valid) => {
        if (valid) {
        console.log(333);
        onSubmit()
        }
    })
}

const onSubmit = async () => {
  let res:any = await addData(form)
  console.log("添加管理员", res);
  if (res.errCode == 10000) {
    ElMessage.success("添加成功")
    emits("close", true);
  }else {
    ElMessage.error(res.errMsg)
  }
}


//添加相关
const validatorRePass=(rule:any, value:any, callback:any) => {
      console.log(rule);
      if(value !== form.pass) {
        callback(new Error('两次密码不一致'))
      }else {
        callback()
      }
    }




const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
  ],
  pass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  repass:[
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatorRePass, trigger: 'blur'}
  ],
  name:[
  { required: true, message: '姓名不能为空', trigger: 'blur' },
  ],
  tel:[
  { required: true, message: '电话不能为空', trigger: 'blur' },
  ],
  typeid:[
  { required: true, message: '请选择角色', trigger: 'blur' },
  ]
})


let roleData = ref<any>([])
const getRoleData = async () => {
  const res = await getList({ psize: 10000 });
  console.log("角色列表", res);
  roleData.value = res.data.list
  Object.assign(form, props)
}


onMounted(() => {
  getRoleData()

})

</script>

<style scoped lang="less">
.dialog-footer{
  display: flex;
  justify-content: center;
  .btn{
    width:600px;
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    margin: 20px 0;
    el-button{
      height: 36px;
    }
  }
}
</style>
